<template>
	<div class="main">
		<div v-for="(item, index) in baseInfo.Configs" :key="index">
			<div v-if="item.Type">
				<!-- 输入框 -->
				<van-field :border="false" name="area" v-if="item.Type == 'Text' || item.Type == 'Number'"
					v-model="item.Value" :label="item.Display">
					<template #extra>
						{{ item.Unit }}
					</template>
				</van-field>
				<!-- 日期 -->
				<!-- <van-field :border="false" name="area" v-if="item.Type == 'Date'" v-model="item.Value" :label="item.Display">
					<!-- <template #extra>
						{{ item.Unit }}
					</template> -->

				<!-- </van-field> -->
				<date-picker :label="item.Display" labelWidth="80" v-if="item.Type == 'Date'" required
					:date.sync="item.Value"></date-picker>
				<!-- 单位存在 -->
				<van-field v-model="item.AnotherValue" v-if="item.RelatedDisplay" label="">
					<template #extra>
						{{ item.RelatedFieldUnit }} </template>
				</van-field>
				<van-field class="input_text" v-if="item.Type == 'Choose'" v-model="trade" :label="item.Display"
					readonly autosize type="textarea" />
				<!-- 地区 -->
				<van-field required class="input_text" v-if="item.Type == 'City'" v-model="item.Value"
					:label="item.Display" readonly autosize type="textarea" right-icon="arrow" />
				<!-- 详细地址 -->
				<div class="problem" v-if="item.Type == 'Map'">
					<div>
						<van-field class="input_text" :label="item.Display" input-align="right">
							<template #input>
								<div style="color: #1296db">从地图选择</div>
							</template>
						</van-field>
					</div>
					<van-field v-model="item.Value" rows="3" autosize type="textarea" placeholder="请输入反馈内容" />
				</div>
				<!-- 图片 -->
				<van-field v-if="item.Type == 'SingleImage'" class="input_text" name="uploader" :label="item.Display">
					<template #input>
						<!-- <img class="imgs" v-if="item.Value" :src="baseUrl + item.Value" alt="" />

						<van-uploader v-else v-model="uploader" /> -->
						<van-uploader deletable :after-read="afterRead" v-model="uploader[item.FieldName]" max-count="1"
							:name="item.FieldName" />

					</template>
				</van-field>
				<!-- 图片 多照片-->
				<van-field v-if="item.Type == 'MultiImage'" class="input_text" name="uploader" :label="item.Display"
					delete="delete">
					<template #input>
						<van-uploader deletable :after-read="afterRead" v-model="uploader[item.FieldName]" max-count="6"
							:name="item.FieldName" />
					</template>
				</van-field>
				<!-- 单选框 -->
				<van-field class="input_text" name="radio" :label="item.Display" v-if="item.Type == 'Radio'">
					<template #input>
						<van-radio-group v-model="item.Value" direction="horizontal">
							<van-radio v-for="(item1, index1) in item.ParamList" :key="index1" :name="item1.ID"
								style="margin: 0 10px 10px 0">{{ item1.Name }}</van-radio>
						</van-radio-group>
					</template>
				</van-field>
				<!-- 多选 -->
				<van-field class="input_text" name="radio" :label="item.Display"
					v-if="item.Type == 'Checkbox' && !item.SecondFieldName">
					<template #input>
						<van-checkbox-group v-model="item.Value" direction="horizontal">
							<van-checkbox shape="square" v-for="(item1, index1) in item.ParamList" :key="index1"
								:name="item1.ID" style="margin: 0 10px 10px 0">{{ item1.Name }}</van-checkbox>
						</van-checkbox-group>
					</template>
				</van-field>

				<!-- 下划线 -->
				<van-field class="input_text spe_box" readonly name="checkbox" :label="item.Display || item.RiskName"
					v-if="item.Type == 'Checkbox' && (item.FirstFieldName || item.FirstFieldUnit || item.SecondFieldName)">
					<template #input>
						<div>
							<div v-for="(item1, index1) in item.ParamList" :key="index1">
								<div class="spec-right">
									<van-checkbox-group v-model="checkboxGroup">
										<van-checkbox :name='item1.ID' shape="square">
											{{ item1.Name }}
										</van-checkbox>
									</van-checkbox-group>
									<input type="text" v-if="item.ShowFirstFieldKey == item1.ID"
										v-model="item1.FirstField" class="input-line">
									<span v-if="item.FirstFieldName || item.SecondFieldName">，{{ item.FirstFieldName ||
			item.SecondFieldName }}</span>
									<input type="text" class="input-line" v-model="item1.SecondField">
									<span>{{ item.FirstFieldUnit || item.SecondFieldUnit || item1.Extra }}</span>
								</div>
							</div>

						</div>
					</template>
				</van-field>
			</div>
			<div v-if="!item.Type && item.Unit">
				<van-field name="area" v-model="item.Value" :label="item.Display">
					<template #extra>
						{{ item.Unit }}
					</template>
				</van-field>
			</div>
		</div>

		<div class="btn_submit">
			<van-button class="br-5" block type="info" @click="save">
				保存
			</van-button>
		</div>
	</div>
</template>

<script>
import { GetQueryupText, updateRiskPointInfoModifyPostNew2, updateRiskPointInfoModifyPostNew3 } from '@/api/base'
import { mapGetters } from 'vuex'
import { uploadAttach } from "@/api/common";
export default {
	components: {},
	data() {
		return {
			checked: true,
			number: '',
			result: '',
			checkbox: false,
			checkboxGroup: [],
			baseInfo: this.$route.params,
			uploader: {},
			type:''
		}
	},
	computed: {
		...mapGetters(['baseUrl']),
	},
	created() {

		const baseInfo = this.$route.params
		this.baseInfo = baseInfo
		this.type=baseInfo.type2
		console.log(this.baseInfo)
		this.$store.state.title = "编辑" + this.baseInfo.Display
		// 处理复选框数据
		// let newArr =[]
		if (baseInfo.Configs) {
			baseInfo.Configs.forEach((item) => {
				if (item.Type == 'Checkbox' && !item.ValueType) {
					if (!item.Value) {
						item.Value = []
					} else {
						// item.Value = item.Value.split(',')
						// item.Value 

					}
				}
				if (item.ValueType == 'Json') {
					item.ParamList.filter((v1) => {
						item.Value.filter((v2) => {
							if (v1.ID == v2.Key) {
								v1.FirstField = v2.FirstField
								v1.SecondField = v2.SecondField
							}
						})
					})
					this.checkboxGroup = item.Value.map(v => {
						return v.Key
					})
				}

				if (item.Type == "SingleImage" || item.Type == "MultiImage") {

					if (item.Value != null && item.Value != '') {
						let Images = item.Value.split(';')
						let array = []
						for (let index = 0; index < Images.length; index++) {
							let element = Images[index];
							array.push({ url: this.baseUrl + element, AttFilePath: element })
							// this.$set(this.uploader, item1.FieldName, [{ url: this.baseUrl + item1.Value, AttFilePath: item1.Value }])	

						}
						this.$set(this.uploader, item.FieldName, array)
						console.log(this.uploader)
					}
				} else if (!item.Type) {
					item.Type = 'Text'
				}
			})
		}
	},
	methods: {
		afterRead(file, name) {
			console.log(file)
			console.log(name)
			let params = new FormData(); //创建form对象
			params.append("file", file.file);
			uploadAttach(params)
				.then((res) => {
					// this.uploader[name.name]=res.data.
					console.log(name)
					this.uploader[name.name][name.index].AttFilePath = res.data.AttFilePath
					console.log(this.uploader)
				})
				.catch((err) => {
					console.log("err", err);
				});
		},
		delete(value) {
			console.log("delete")
			console.log(value)
		},
		save() {
			this.loading = true
			let newArr = []
			let newArr2 = {}
			// this.baseInfo.Configs.forEach((item, index) => {
			// 	const ParamList = item.ParamList.filter(v => this.checkboxGroup.some(v1 => v1 == v.ID))
			// 	const data = ParamList.map(v => {
			// 		return {
			// 			Key: v.ID,
			// 			FirstField: v.FirstField || '',
			// 			SecondField: v.SecondField || ''
			// 		}
			// 	})
			// 	console.log(item)
			// 	console.log(data)
			// 	let DisplayKey = 'Details3[' + index + '].DisplayKey'
			// 	let ValueKey = 'Details3[' + index + '].Value'
			// 	newArr2[DisplayKey] = item.FieldName
			// 	newArr2[ValueKey] = item.ValueType == 'Json'
			// 		? JSON.stringify(data)
			// 		// : item.Value.join(','),
			// 		: item.Value
				// newArr.push({
				// 	DisplayKey: item.FieldName,
				// 	ValueKey:
				// 		item.ValueType == 'Json'
				// 			? JSON.stringify(data)
				// 			// : item.Value.join(','),
				// 			: item.Value,
				// })

			// })
			
			for (let index = 0; index < this.baseInfo.Configs.length; index++) {
				let tempValue
				const item = this.baseInfo.Configs[index];
				let DisplayKey = 'Details3[' + index + '].DisplayKey'
				let ValueKey = 'Details3[' + index + '].Value'
				newArr2[DisplayKey] = item.FieldName

				if (item.MustInput) {
					if (item.Value == null || item.Value == '') {

						Toast('请填写:' + item.Display)
						return
					}
				}
				if (item.Type == "SingleImage") {
					if (this.uploader[item.FieldName]) {
						// item.Value = this.uploader[item.FieldName].map(element => element.AttFilePath).join(';')
						tempValue = this.uploader[item.FieldName].map(element => element.AttFilePath).join(';')
					} else {
						tempValue = ''
					}

				}
				else if (item.Type == "MultiImage") {
					if (this.uploader[item.FieldName]) {
						// item.Value = this.uploader[item.FieldName].map(element => element.AttFilePath).join(';')
						tempValue = this.uploader[item.FieldName].map(element => element.AttFilePath).join(';')

					} else {
						tempValue = ''
					}

				}

				else if (item.Type == 'Checkbox') {
					// if(item.Value&&item.Value.)
					// if((item.FirstFieldName || item.FirstFieldUnit || item.SecondFieldName)){
					if (item.ValueType == 'Json') {

						// if(item.ParamList)
						const ParamList = item.ParamList.filter(v => this.checkboxGroup.some(v1 => v1 == v.ID))
						const data = ParamList.map(v => {
							return {
								Key: v.ID,
								FirstField: v.FirstField || '',
								SecondField: v.SecondField || ''
							}

						})
						tempValue = JSON.stringify(data)
					} else {
						tempValue = item.Value.join(',')
					}

				} else {
					tempValue = item.Value
				}


				// if (item.ShowRelatedFieldKey) {
				// 	newArr2[item.RelatedFieldName] = item.RelatedFieldValue
				// }

				newArr2[ValueKey] = tempValue

			}
			newArr2.CompanyCode = this.baseInfo.CompanyCode
			if(this.type){
				newArr2['pageType']=this.type
			}
			if(this.baseInfo.FieldName=='RiskManagerInfo'&&this.type=='DangerLevel'){
				let value=newArr2['Details3[0].Value']
				newArr2={
					pageType:"DangerLevel",
					RiskPointEng:value,
					CompanyCode:this.baseInfo.CompanyCode
				}

			}
			if (this.baseInfo._key == this.baseInfo.FieldName) {
				updateRiskPointInfoModifyPostNew3(this.baseInfo._key, newArr2)
					.then((res) => {
						this.loading = false
						this.$router.go(-1)
					})
					.catch((err) => {
						console.log('err', err)
					})
			} else {
				updateRiskPointInfoModifyPostNew2(this.baseInfo._key, this.baseInfo.FieldName, newArr2)
					.then((res) => {
						this.loading = false
						this.$router.go(-1)
					})
					.catch((err) => {
						console.log('err', err)
					})
			}

		},
	},
}
</script>

<style lang="less">
.checkbox {
	>div {
		/*box-sizing: content-box!important;*/
	}

	.van-checkbox__label {
		display: flex;
		height: 20px;
	}

	.van-cell.van-field {
		vertical-align: middle;
		padding: 0 !important;
	}
}

.spe_box {
	background-color: #ffffff;
	display: flex;
	justify-content: space-between;
	padding: 10px 16px;

	.spe_name {
		width: 25% !important;
	}

	/*.van-checkbox-group{*/
	/*  display: flex;*/
	/*  !*position: absolute;*!*/
	/*  !*z-index: 10;*!*/
	/*  !*width: 30px!important;*!*/
	/*}*/
}

.spec-right {
	font-size: 14px;
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 10px;

	.van-field {
		width: 100px;
	}

	.van-field__control {
		border-bottom: 1px solid;
		background-color: #fff;
	}

	.input-line {
		width: 60px;
		height: 20px;
		border: none;
		border-bottom: 1px solid;
		padding: 0 5px;
		box-sizing: border-box;
		text-align: center;
	}
}
</style>
